<template>
  <div class="{styles.shopDetailContainer}">
    <img src="../../assets/imgs/shop2.jpg" alt="" class="shop-img" />
    <div class="divider"></div>
    <div class="shop-info">
      <div class="info-first">
        <p>￥100</p>
        <p><van-tag type="danger" style="font-weight: 500;">销量:4</van-tag></p>
      </div>
      <div class="info-two">雪花牛肉</div>
      <div class="info-their">10斤 | ±0.5斤</div>
      <p>
        <van-tag plain>生产日期:2024-01-25</van-tag>
        <van-tag plain style="margin-left:5px">保质期:100天</van-tag>
        <van-button size="small" class="renew" type="primary" plain
          >更新</van-button
        >
      </p>
      <div class="info-last">
        <div>剩余库存: 96</div>
        <div>
          <van-tag type="success">上架中</van-tag>
        </div>
      </div>
    </div>

    <div class="info-bottom">
      <div class="info-bottom-first" style="margin-bottom: 10px;">
        <van-cell is-link>
          <template #title>
            <i class="icon iconfont icon-sousuokuang" style="font-weight: 400">
              查看资质</i
            >
          </template>
        </van-cell>
      </div>
      <div style="margin-top: 10px">
        <van-button block type="success" 
          >补货</van-button
        >
      </div>

      <van-button block type="danger" style="margin-top: 5px">下架</van-button>
    </div>
  </div>

  <!-- <div>
        {{ data.view }}
    </div> -->
</template>
    
    <script setup>
import { reactive } from "vue";

const data = reactive({
  view: "这是商品详情页面",
});
</script>


<style scoped>
.renew {
  float: right;
  height: 22px;
  width: 50px;
}

.shopDetailContainer {
  /* width: 100vw;
    height: 80px; */
  /* border: 1px solid #000; */
}
.shop-img {
  width: 100%;
  height: 300px;
}

.divider {
  /* border-bottom: 1px solid #c2cbcb; */
  margin-top: 5px;
}

.shop-info {
  padding: 5px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

p {
  margin: 5px 0px 5px 0px;
}

.info-first {
  display: flex;
  justify-content: space-between;
  color: red;
  font-weight: bold;
}

.info-two {
  font-size: 13px;
  font-weight: bold;
}

.info-their {
  margin-top: 5px;
  font-size: 10px;
  /* color: #c2cbcb; */
  color: #b2b2b2;
}

.info-last {
  margin-top: 10px;
  font-size: 10px;
  /* color: #c2cbcb; */
  color: #b2b2b2;
  display: flex;
  justify-content: space-between;
}

.info-bottom {
  /* height: 80px; */
  border-bottom: 1px solid #eee;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.info-bottom-first {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px 0px 10px;
  font-weight: 600;
}
</style>